import { message, Modal, Tag } from 'ant-design-vue'
import details from '../details.vue'
import { usePublicHooks } from './usePublicHooks'
import { batchDeleteSystemLog, getSystemLogList } from './api'
import type { ListSystemLogParamsType, SystemLogType } from './model'
import { addDialog } from '@/components/SpDialog/index'
import type { SpColumnsType } from '@/components/SpTable/type'

const [modal, contextHolder] = Modal.useModal()
export function useSystemLog() {
  const columns: SpColumnsType[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 100,
      align: 'center',
      type: 'slot'
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: 100,
      align: 'center',
      type: 'slot'
    },
    {
      title: 'IP',
      dataIndex: 'operIp',
      width: 100,
      align: 'center'
    },
    {
      title: '业务类型',
      dataIndex: 'businessType',
      width: 100,
      align: 'center',
      cellRenderer: (record: SystemLogType) => {
        return (
          <Tag color={getBusinessTypeTag(record.businessType)}>
            {getBusinessTypeTag(record.businessType, true)}
          </Tag>
        )
      }
    },
    {
      title: '操作人员',
      dataIndex: 'operName',
      width: 100,
      align: 'center'
    },
    {
      title: '操作地点',
      dataIndex: 'ipAddress',
      width: 100,
      align: 'center'
    },

    {
      title: '操作类型',
      dataIndex: 'operatorType',
      width: 100,
      align: 'center',
      cellRenderer: (record: SystemLogType) => {
        return (
          <Tag color={getOperatorTypeTag(record.operatorType)}>
            {getOperatorTypeTag(record.operatorType, true)}
          </Tag>
        )
      }
    },
    {
      title: '浏览器类型',
      dataIndex: 'browserType',
      width: 100,
      align: 'center'
    },
    {
      title: '操作系统',
      dataIndex: 'operatingSystem',
      width: 100,
      align: 'center'
    },
    {
      title: '状态',
      dataIndex: 'status',
      cellRenderer: (record: SystemLogType) => {
        if (record.status === 0) {
          return <Tag color="red">异常</Tag>
        } else {
          return <Tag color="green">成功</Tag>
        }
      },
      width: 100,
      align: 'center'
    },
    {
      title: '消耗时间',
      dataIndex: 'costTime',
      width: 100,
      align: 'center',
      cellRenderer: (record: SystemLogType) => <span>{record.costTime}ms</span>
    },
    {
      title: '请求时间',
      dataIndex: 'operTime',
      width: 200,
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 100,
      type: 'slot',
      align: 'center'
    }
  ]
  const { getBusinessTypeTag, getOperatorTypeTag } = usePublicHooks()

  const [queryParams, reset] = useResetState<ListSystemLogParamsType>(
    { pageNum: 1, pageSize: 5, total: 0 },
    () => {
      getDataList()
    }
  )

  const { getDataList, dataList, loading, paginationChange } = useTablePaging(
    getSystemLogList,
    queryParams
  )

  // 选中项
  const selectedRowKeys = ref<number[]>([])

  // 查看详情
  function openDetails(data: SystemLogType) {
    addDialog({
      title: '日志详情',
      fullScreen: true,
      footer: false,
      contentRenderer: () =>
        h(details, {
          data
        })
    })
  }

  // 批量删除
  function batchDeleteChange() {
    modal.confirm({
      title: '提示',
      content: '您确定删除选上的日志吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        batchDeleteSystemLog(selectedRowKeys.value).then(() => {
          message.success('删除成功')
          getDataList()
          selectedRowKeys.value = []
        })
      }
    })
  }

  // 选中项
  const onSelectChange = (keys: number[]) => {
    selectedRowKeys.value = keys
  }

  // 搜索
  function search() {
    queryParams.pageNum = 1
    getDataList()
  }

  onMounted(() => {
    getDataList()
  })

  return {
    dataList,
    columns,
    queryParams,
    loading,
    selectedRowKeys,
    search,
    batchDeleteChange,
    onSelectChange,
    paginationChange,
    contextHolder,
    openDetails,
    reset
  }
}
